<!--
*@Author: QWP
*@Description: 应还排查治理
*@Date: 2024-07-08 09:51:28
-->
<template>
  <a-layout class="f-h-100 s-bg-white" id="test">
    <a-layout-content
      style=" padding: 0 12px; background-color: #fff;">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="当前隐患" style="padding: 0;">
          <a-layout class="f-h-100 s-bg-white">
            <u-search-header style="padding-left: 0; padding-right: 0">
              <u-form
                :model="searchF"
                :gutter="16"
                :elements="searchEl"
                class="f-w-auto">
                <a-col>
                  <u-icon-button>查询</u-icon-button>
                </a-col>
                <a-col flex="1">
                  <a-row justify="end">
                    <a-space>
                      <u-icon-button itype="add" @click="showEdit = true">新增</u-icon-button>
                      <u-icon-button itype="edit" @click="showEdit = true">修改</u-icon-button>
                      <u-icon-button itype="delete" @click="">删除 </u-icon-button>
                    </a-space>
                  </a-row>
                </a-col>
              </u-form>
            </u-search-header>
            <a-layout-content>
              <u-table
                :columns="columns"
                :data="tabData"
                v-model:pagination="pagenation"></u-table>
            </a-layout-content>
          </a-layout>
        </a-tab-pane>
        <a-tab-pane key="2" tab="历史隐患" style="padding: 0;">
          <a-layout class="f-h-100 s-bg-white">
            <u-search-header style="padding-left: 0; padding-right: 0">
              <u-form
                :model="searchF"
                :gutter="16"
                :elements="searchEl"
                class="f-w-auto">
                <a-col>
                  <u-icon-button>查询</u-icon-button>
                </a-col>
              </u-form>
            </u-search-header>
            <a-layout-content>
              <u-table
                :columns="columns"
                :data="tabData"
                v-model:pagination="pagenation"></u-table>
            </a-layout-content>
          </a-layout>
        </a-tab-pane>
      </a-tabs>
    </a-layout-content>
  </a-layout>

  <!-- 编辑弹窗 -->
  <Edit v-model:open="showEdit"
    wrap-class-name="full-modal"
    :title="dialogTitle" />

  <!-- 详情弹窗 -->
  <Detial v-model:open="showDetial"
    wrap-class-name="full-modal"
    title="隐患详情" />
  
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate, onBeforeRouteLeave} from "vue-router";
import { _IFormEl } from "@/components/common/form/interface";
import { Button, ColProps, FormItemProps, Space, TableColumnProps } from "ant-design-vue";
import { FormOutlined, ContainerOutlined } from '@ant-design/icons-vue';
import { _IExtra } from '@/src/components/common/form/interface';
import { numberC } from '@/util/common'
import { formatAmt, } from '@/util/format.ts'
import dayjs from "dayjs";
import Edit from './Edit.vue'
import Detial from './Detial.vue'
import { cloneDeep } from 'lodash'
import { regions } from '@/common/model/base'
const route = useRoute();
const router = useRouter();

onMounted(() => {
})

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`
})
const searchF = reactive({
  model: {
    fwzh: "",
    fwzh1: "",
  },
});
const formItemProps: FormItemProps & _IExtra = {
  labelWidth: '80px',
  wrapperCol: { span: 16 },
};
const searchEl: Array<_IFormEl> = [
  { label: "关键字", key: "option", element: "input", col: { span: 4 }, formItemProps: formItemProps, },
  { label: "隐患来源", key: "pc", element: "select", col: { span: 4 }, formItemProps: formItemProps,
    componentProps: { 
      options: [
        { label: '群众排查', value: '1'},
        { label: '企业自查', value: '2'},
        { label: '政府督查', value: '3'},
      ]
    }
  },
  { label: "隐患等级", key: "yhdj", element: "select", col: { span: 4 }, formItemProps: formItemProps,
    componentProps: { 
      options: [
        { label: '重大隐患', value: '1'},
        { label: '一般隐患', value: '2'},
      ]
    }
  },
  { label: "整改情况", key: "zgqk", element: "select", col: { span: 4 }, formItemProps: formItemProps,
    componentProps: { 
      options: [
        { label: '超期未整改', value: '1'},
        { label: '整改中', value: '2'},
        { label: '整改完成', value: '3'},
      ]
    }
  },
  { label: "行政地区", key: "xzdq", element: "select", col: { span: 4 }, formItemProps: formItemProps,
    componentProps: { options: regions }
  },
  { label: "检查时间", key: "jcsj", element: "rangePicker", col: { span: 6 }, formItemProps: formItemProps,
    componentProps: { options: regions }
  },
];

// 列表
const tabData = reactive([
  { a: "上海乐娱文化有限公司", b: "娱乐", b1: '互联网', b2: '1000人', jbr: '上海市高新区高新技术', lrsj: '王善成', ts: '15782845491', 
    lxr: '王阳明', lxdh: '137333333333',
  },
  { a: "测试公司", b: "机械", b1: '机械制造', b2: '1000人', jbr: '成都高新产业技术园', lrsj: '丁艳玲', ts: '15782845491', 
    lxr: '王阳明', lxdh: '137333333333',
  },
]);
let columns: Array<TableColumnProps> = reactive([
  { dataIndex: "a", title: "企业名称", width: 150 },
  { dataIndex: "b", title: "隐患名称", width: 100 },
  { dataIndex: "b1", title: "隐患来源", width: 100 },
  { dataIndex: "b2", title: "隐患等级", width: 100 },
  { dataIndex: "jbr", title: "整改期限", width: 100 },
  { dataIndex: "lrsj", title: "整改情况 ", width: 150 },
  { dataIndex: "ts", title: "检查名称", width: 150 },
  { dataIndex: "lxr", title: "检查时间", width: 100 },
  { dataIndex: "do", title: "操作", width: 100, align: 'center',
    customRender: ({}) => {
      return h(Space, { size: 2 }, [
        h(Button, { type: 'link', icon: h(ContainerOutlined), onClick: () => showDetial.value = true }, '详情'),
        h(Button, { type: 'link', icon: h(FormOutlined) }, '催办')
      ])
    }
  },
]);

// 编辑
let dialogTitle = ref<string>("隐患编辑")
let showEdit = ref<boolean>(false)
let showDetial = ref<boolean>(false)

</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
